<template>
    <el-table border style="width: 100%;" :data="data" :row-class-name="tableRowClassName" :loading="loading">
        <el-table-column fixed="left" align="center" prop="period" :label="$i18n.t('PERIOD_NUM')" :min-width="170"></el-table-column>
        <el-table-column align="center" prop="loaned_order_no" :label="$i18n.t('LOANED_ORDER_NO')" :min-width="170"></el-table-column>
        <el-table-column align="center" prop="due_time" :label="$i18n.t('DUE_TIME')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="repayment_time" :label="$i18n.t('REPAYMENT_TIME')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="apply_amount" :label="$i18n.t('APPLY_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="interest_amount" :label="$i18n.t('INTEREST_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="service_amount" :label="$i18n.t('SERVICE_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="overdue_amount" :label="$i18n.t('OVERDUE_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="renewal_amount" :label="$i18n.t('RENEWAL_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="repayment_amount" :label="$i18n.t('MUST_REPAYMENT_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="paid_amount" :label="$i18n.t('PAID_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="remaining_repayment_amount" :label="$i18n.t('REMAINING_REPAYMENT_AMOUNT')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="overdue_day" :label="$i18n.t('OVERDUE_DAY')" :min-width="100"></el-table-column>
        <el-table-column align="center" prop="status_text" :label="$i18n.t('REPAYMENT_STATUS')" :min-width="150" fixed="right">
            <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.status === 1" type="" effect="dark">{{ scope.row.status_text }}</el-tag>
                <el-tag size="mini" v-if="scope.row.status === 2" type="warning" effect="dark">{{ scope.row.status_text }}</el-tag>
                <el-tag size="mini" v-if="scope.row.status === 3" type="success" effect="dark">{{ scope.row.status_text }}</el-tag>
                <el-tag size="mini" v-if="scope.row.status === 4" type="success" effect="dark">{{ scope.row.status_text }}</el-tag>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'LoanedOrderListTable',
        props: ['data', 'loading'],
        methods: {
            tableRowClassName ({ row }) {
                const { id } = this.$route.query
                if (id !== null && row.id === parseInt(id)) {
                    return 'warning-row'
                }
                return ''
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .warning-row {
        background: pink !important;
    }
</style>
